<template>
  <div class="user-profile-page">
    <van-nav-bar
      left-arrow
      @click-left="$router.back()"
      title="个人信息"
    ></van-nav-bar>
    <van-cell-group>
      <van-cell is-link title="头像" center @click="showPhoto = true">
        <van-image slot="default" fit="cover" round :src="user.photo" />
      </van-cell>
      <van-cell
        is-link
        title="昵称"
        :value="user.name || '未填写'"
        @click="openNamePopup()"
      />
    </van-cell-group>
    <van-cell-group style="margin-top: 12px">
      <van-cell
        is-link
        title="性别"
        @click="showGender = true"
        :value="user.gender ? '女' : '男'"
      />
      <van-cell
        is-link
        title="生日"
        @click="showBirthday = true"
        :value="user.birthday || '未填写'"
      />
    </van-cell-group>
    <div class="logout">
      <span @click="outLogin">退出登录</span>
    </div>

    <!-- 修改头像弹出层 select: 点击选项时触发 -->
    <van-action-sheet
      v-model="showPhoto"
      :actions="[
        { name: '拍照', value: 0 },
        { name: '本地选择', value: 1 }
      ]"
      cancel-text="取消"
      @select="onPhotoSelect"
    />
    <!-- 点击本地上传 上传file输入框 -->
    <input type="file" @change="updatePhoto" style="display: none" ref="file" />

    <!-- 修改昵称 弹出层 -->
    <van-popup class="my-popup" v-model="showName" position="right">
      <van-nav-bar
        left-arrow
        @click-left="showName = false"
        right-text="保存"
        title="修改昵称"
        @click-right="saveName"
      />
      <van-field v-model="name"></van-field>
    </van-popup>

    <!-- 修改用户性别 -->
    <van-action-sheet
      v-model="showGender"
      :actions="[
        { name: '男', value: 0 },
        { name: '女', value: 1 }
      ]"
      cancel-text="取消"
      @select="saveGender"
    />

    <!-- 修改生日 -->
    <van-calendar
      v-model="showBirthday"
      @confirm="saveBirthday"
      :min-date="new Date(1960, 0, 1)"
      :max-date="new Date()"
    />
  </div>
</template>

<script>
import { getUserProfileAPI, changePhotoAPI, updateUserAPI } from '@/api/user'
export default {
  name: 'UserProfilePage',
  data () {
    return {
      user: {}, // 用户相关信息
      showPhoto: false,
      name: '',
      showName: false,
      showGender: false,
      showBirthday: false,
      birthday: ''
    }
  },
  created () {
    this.getUserProfile()
  },
  methods: {
    // 获取用户个人信息
    async getUserProfile () {
      const [, res] = await getUserProfileAPI()
      console.log(res)
      this.user = res.data.data
    },
    // 退出登录
    outLogin () {
      this.$dialog
        .confirm({
          title: '温馨提示',
          message: '是否退出登录',
          theme: 'round-button'
        })
        .then(() => {
          // 删除token 跳转页面 提示退出
          this.$store.commit('user/setToken', '')
          this.$store.commit('user/setRefreshToken', '')
          this.$router.push('/')
          this.$toast.success('退出成功')
        })
    },
    // 选择修改头像-动作面板选项
    onPhotoSelect (item) {
      // console.log(item)
      if (item.value === 1) {
        // 本地选择
        this.$refs.file.click()
        this.showPhoto = false
      }
    },
    // 修改头像
    async updatePhoto () {
      // 选择图片后的文件信息对象
      const file = this.$refs.file.files[0]
      if (file) {
        // 上传图片
        const fd = new FormData()
        fd.append('photo', file)
        const [err, res] = await changePhotoAPI(fd)
        if (err) return this.$toast.fail('修改失败')
        this.user.photo = res.data.data.photo
        this.$toast.success('修改成功')
      }
    },
    // 打开修改昵称面板
    openNamePopup () {
      this.showName = true
      this.name = this.user.name
    },
    // 保存昵称
    async saveName () {
      if (!this.name) return this.$toast.fail('昵称不能为空')
      this.user.name = this.name
      const [err] = await updateUserAPI(this.user)
      if (err) return this.$toast.fail('修改失败')
      this.showName = false
      this.user.name = this.name
      this.$toast.success('修改成功')
    },
    // 保存性别
    async saveGender (item) {
      console.log(item.value)
      this.user.gender = item.value
      const [err] = await updateUserAPI(this.user)
      if (err) return this.$toast.fail('修改失败')
      this.user.gender = item.value
      this.$toast.success('修改成功')
      this.showGender = false
    },
    // 格式化日期
    formatDate (date) {
      console.log(date)
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
    },
    // 保存生日
    async saveBirthday (date) {
      this.birthday = this.formatDate(date)
      console.log(this.birthday)
      this.user.birthday = this.birthday
      const [err] = await updateUserAPI(this.user)
      if (err) return this.$toast.fail('修改失败')
      this.$toast.success('修改成功')
      this.showBirthday = false
      this.birthday = this.user.birthday
    }
  }
}
</script>

<style lang="less" scoped>
.user-profile-page {
  background: #f8f8f8;
  .van-image {
    display: block;
    float: right;
    width: 30px;
    height: 30px;
  }
  .van-cell__title {
    width: 50px;
    flex: none;
  }
}
.logout {
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 30px;
  width: 100%;
  color: @geek-color;
}

// 修改昵称弹出层
.my-popup {
  width: 100%;
  height: 100%;
  /deep/ .van-nav-bar__text {
    color: @geek-color;
  }
  /deep/ .van-field__control {
    background: @geek-gray-color;
    padding: 10px;
    border-radius: 4px;
  }
}
</style>
